<template>
  <page-view>
    <el-card>
      <template #header>
        <div class="flex flex-row justify-between">
          <div class="font-bold">编辑管理员</div>
        </div>
      </template>
      <!--表单-->
      <el-form label-width="140px" :model="adminInfoData" :rules="adminInfoDataRules" ref="formEl">
        <el-form-item label="管理员名称名称" prop="admin_name">
          <el-input placeholder="请输入管理员名称" v-model="adminInfoData.admin_name" />
        </el-form-item>
        <el-form-item label="性别" prop="admin_sex" >
          <div class="mb-2 flex items-center text-sm">
            <el-radio-group v-model="adminInfoData.admin_sex" class="ml-4">
              <el-radio label="男" size="large">男</el-radio>
              <el-radio label="女" size="large">女</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="手机号" prop="admin_tel">
          <el-input placeholder="请输入手机号" v-model="adminInfoData.admin_tel" />
        </el-form-item>
        <el-form-item label="邮箱" prop="admin_email">
          <el-input placeholder="请输入邮箱" v-model="adminInfoData.admin_email" />
        </el-form-item>
        <el-form-item label="头像" prop="admin_photo">
            <el-upload v-loading="isUploadingImg" element-loading-text="正在上传图片"
              :action="baseURL + '/adminInfo/uploadAdminPhoto'" 
              :headers="{ softeem_ele_admin_token: store.token }" name="admin_photo"
              class="w-[200px] h-[200px] border border-dashed border-gray-400 flex flex-row justify-center items-center"
              :before-upload="beforeUpload" :show-file-list="false" :on-success="uploadSuccess">
              <el-image :src="baseURL + adminInfoData.admin_photo" v-if="adminInfoData.admin_photo" fit="contain"
                class="w-full h-full" lazy>
                <template #placeholder>
                  <div class="text-primaryColor text-[14px] w-full h-full flex flex-row justify-center items-center">
                    正在加载图片...</div>
                </template>
              </el-image>
              <el-icon size="65px" color="#808080" v-else>
                <PictureFilled />
              </el-icon>
            </el-upload>
          </el-form-item>
        <el-form-item label="管理员" prop="admin_type">
          <div class="mb-2 flex items-center text-sm">
            <el-radio-group v-model="type[adminInfoData.admin_type]" class="ml-4">
              <el-radio label="普通管理员" size="large">普通管理员</el-radio>
              <el-radio label="超级管理员" size="large">超级管理员</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
       
        <el-form-item>
          <el-button type="primary" @click="submitForm" :loading="isSubmiting" :loading-icon="Loading">保存数据
          </el-button>
          <el-button type="danger" @click="$router.back()">返回列表</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </page-view>
</template>
  
<script setup>
import { PictureFilled, Loading } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
import { reactive, ref, inject } from "vue";
import API from "@/utils/API/index.js";
import { mainStore } from "../../store/index.js";
import { useRouter ,useRoute} from "vue-router";

const store = mainStore();
const baseURL = inject("baseURL");
const router = useRouter();
const route = useRoute();
//表单上面的数据
const adminInfoData = ref({
  id:"",
  admin_name:"",
  admin_pwd:"",
  admin_sex:"男",
  admin_tel:"",
  admin_email:"",
  admin_photo:"",
  admin_type:0
});

const type=reactive(["普通管理员","超级管理员"])
//表单验证的规则
const adminInfoDataRules = {
  admin_name: [{ required: true, message: "请输入管理员名称", trigger: "blur" }],
  admin_pwd: [{ required: true, message: "请输入管理员密码", trigger: "blur" }],
  admin_tel: [{ required: true, message: "请输入管理员电话号码", trigger: "blur" }],
  admin_photo: [{ required: true, message: "请选择管理员头像", trigger: "blur" }],
}

const isLoading = ref(false);
  const findById = () => {
    isLoading.value = true;
    let id = route.params.id;
    // adminInfoData.id=id;
    console.log(id);
    API.adminInfo.findById(id)
        .then(result => {
          console.log(result);
          adminInfoData.value=result;
        })
        .finally(() => {
          isLoading.value = false;
        })
  }
  findById();
  

//开始上传图片之前的操作
const beforeUpload = (rawFile) => {
    let reg = /^image\/(jpe?g|png|webp|gif|bmp)$/;
    if (reg.test(rawFile.type)) {
      //说明是个图片
      if (rawFile.size / 1024 / 1024 > 5) {
        //说明图片大于5M
        ElNotification({
          type: "error",
          title: "错误",
          message: "图片的大小不能大于5M"
        });
        return false;
      }
    } else {
      //说明不是一个图片
      ElNotification({
        type: "error",
        title: "错误",
        message: "请选择图片文件,图片格式必须是jpg,jpeg,png,webp,gif,bmp格式"
      });
      return false;
    }
  }

const uploadSuccess = (result) => {
  adminInfoData.admin_photo = result.data;
  isUploadingImg.value = false;
}


//提交表单
const formEl = ref(null);
const submitForm = () => {
  //验证表单的数据是否合格
  // console.log(formEl.value)
  formEl.value.validate(valid => {
    //这个valid就是验证的结果
    if (valid) {
      //表单验证成功，我们要提交数据
      editAdminInfo();
    } else {
      ElNotification({
        type: "warning",
        title: "提示",
        message: "请正确的填写表单的内容"
      })
    }
  });
}

//编写一个方法，用于修改
const isSubmiting = ref(false);
const editAdminInfo = () => {
  isSubmiting.value = true;
  API.adminInfo.update(adminInfoData.value)
    .then(result => {
      ElNotification({
        type: "success",
        title: "提示",
        message: "修改菜品成功"
      });
      router.back();

    })
    .catch(error => {
      ElNotification({
        type: "danger",
        title: "失败了",
        message: "修改菜品失败，请重试或联系管理员"
      });
      console.log(error);
    })
    .finally(() => {
      isSubmiting.value = false;
    })
}

//重置表单

// const resetForm = () => {
//   // console.log(formEl);
//   formEl.value.resetFields();
// }

</script>
  
<style scoped lang="scss">
:deep(.el-upload) {
  @apply w-full h-full overflow-hidden;
}
</style>